<template>
  <div>
    <a-table :columns="columns" :data-source="data" :loading="loading" bordered>
      <template
        v-for="col in ['paramId', 'description', 'value']"
        :slot="col"
        slot-scope="text, record"
      >
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.key, col)"
          />
          <template v-else>{{ text }}</template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">保存</a>
            <a-popconfirm title="确定取消?" @confirm="() => cancel(record.key)">
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
          </span>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import { GetCallParam,WriteParameters } from "../config/apiList";
import { notification } from "ant-design-vue";
const columns = [
  {
    title: "参数编号",
    dataIndex: "paramId",
    width: "10%",
    scopedSlots: { customRender: "paramId" }
  },
  {
    title: "参数描述",
    dataIndex: "description",
    ellipsis: true,
    scopedSlots: { customRender: "description" }
  },
  {
    title: "参数值",
    dataIndex: "value",
    scopedSlots: { customRender: "value" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

/* const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    paramId: `Edrward ${i}`,
    description: 32,
    value: `London Park no. ${i}`
  });
} */
export default {
  data() {
    return {
      columns,
      data: [],
      loading: true,
      editingKey: ""
    };
  },
  mounted() {
    let vue = this;
    let sss = { deviceid: 30014563, ids: "33,34,35" };
    GetCallParam(sss).then(e => {
      vue.loading = false;
      if (e.data.requstresult === 0) {
        vue.notification({
          type: "error",
          message: "报错",
          description: "请求报错",
          duration: 3
        });
        return;
      }
      e.data.data.parameterList.forEach(element => {
        vue.data.push({
          key: element.paramId,
          paramId: element.paramId,
          description: element.description,
          value: element.value
        });
      });
      vue.notification({
        type: "success",
        message: "成功",
        description: "参数获取成功",
        duration: 3
      });
      vue.cacheData = vue.data.map(item => ({ ...item }));
    });
  },
  methods: {
    notification(data) {
      debugger;
      notification[data.type]({
        message: data.message,
        description: data.description,
        duration: data.duration
      });
    },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      debugger;
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      WriteParameters({deviceid:"", paramid:target.paramId,paramval:target.value})

      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter(item => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
      }
    }
  }
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
